<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5" style="margin-bottom: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>详情信息</span>
          </div>
          <div>
            <div style="text-align: center">
              <div class="el-upload">
                <el-progress
                  type="circle"
                  :percentage="progress"
                ></el-progress>
              </div>
            </div>
            <ul class="user-info">
              <li><div style="height: 100%">产品编码<div class="user-right">{{mainInf.productSn}}</div></div></li>
              <li>产品型号 <div class="user-right">{{mainInf.productCode}}</div></li>
              <li>产品类型<div class="user-right"> {{ dict.label.product_type[mainInf.productType] }} </div></li>
              <li>订单编号 <div class="user-right"><a >{{mainInf.orderCode}}</a></div></li>
              <li>工单编号 <div class="user-right"><a >{{mainInf.workOrderCode}}</a></div></li>
              <li>产线编号 <div class="user-right"><a >{{mainInf.lienCode}}</a></div></li>
              <li>工段编号 <div class="user-right"><a >{{mainInf.sectionCode}}</a></div></li>
              <li>完成状态<div class="user-right"><el-tag :type="getResultStatus(mainInf.result)">{{ dict.label.result_status[mainInf.result]}}</el-tag></div></li>
              <li>开始时间<div class="user-right">{{ mainInf.startTime }}</div></li>
              <li>结束时间<div class="user-right">{{ mainInf.endTime }}</div></li>
              <li>使用路线
                <div class="user-right" >
                  <a>{{mainInf.pathCode}}</a>
                  <span class="badge-content">{{mainInf.pathVersion}}</span>
                </div>
              </li>
              <li>使用BOM
                <div class="user-right">
                  <a>{{mainInf.bomCode}}</a>
                  <span class="badge-content">{{mainInf.bomVersion}}</span>
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19" style="margin-bottom: 20px">
        <!--    用户资料    -->
        <el-card class="box-card step-card" style="overflow:hidden;">
          <div slot="header" class="clearfix">
            <span>产品工艺路线</span>
            <el-button style="float: right; padding: 3px 0" type="text"  @click="openOperationLog">操作记录</el-button>
          </div>
          <div class="my_steps">
            <el-steps space="100px" :active="0" align-center
                      finish-status="process"
                      process-status="process"
            ><!--error-->
              <el-step  v-for="item in productRoutes" @click.native="stepClick(item)" :status="getStatus(item.result)">
                <div slot="title">
                  <a>{{item.operationCode}}</a>
                </div>
                <div slot="description" class="step-description" >
                  <a>{{opMap[item.operationCode]}}</a>
                </div>
              </el-step>
            </el-steps>
          </div>
        </el-card>

        <el-drawer
          title="操作记录"
          :visible.sync="operationDrawer"
          direction="rtl"
          :before-close="handleClose"
          size="40%">
          <!--操作记录列表-->
          <div class="app-container">
            <el-table
              :data="operationList"
              style="width: 100%">
              <el-table-column
                prop="operationCode"
                label="操作工序"
                width="180">
              </el-table-column>
              <el-table-column
                prop="operationContent"
                label="操作类型"
                width="180">
              </el-table-column>

              <el-table-column
                prop="createBy"
                label="操作人">
              </el-table-column>

              <el-table-column
                prop="updateTime"
                label="操作时间">
              </el-table-column>
            </el-table>
          </div>

        </el-drawer>

      </el-col>

      <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
        <el-card class="box-card">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="进出站记录" name="station">
              <div class="block">
                <el-timeline>
                  <el-timeline-item  v-for="item in passStations" :timestamp="item.entryTime" placement="top">
                    <div style="box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
                      <el-card style="box-shadow: none; border-radius: 4px 4px 0px 0px;">
                        <el-descriptions class="margin-top" :title="opMap[item.operationCode]" :column="4" size="small">
                          <el-descriptions-item label="工序编号">
                            {{item.operationCode}}
                          </el-descriptions-item>
                          <el-descriptions-item label="加工设备">
                            {{item.deviceCode}}
                          </el-descriptions-item>
                          <el-descriptions-item label="操作人">
                            {{item.createBy}}
                          </el-descriptions-item>
                          <el-descriptions-item label="出站状态">
                            <el-tag size="small" :type="getResultStatus(item.result)">{{item.result ? dict.label.result[item.result] : '未出站'}}</el-tag>
                          </el-descriptions-item>
                          <el-descriptions-item label="进站时间">
                            {{item.entryTime}}
                          </el-descriptions-item>
                          <el-descriptions-item label="出站时间">
                            {{item.exitTime}}
                          </el-descriptions-item>
                          <el-descriptions-item label="耗时">{{timeDifference(item.entryTime,item.exitTime)}}（秒）</el-descriptions-item>
                        </el-descriptions>
                      </el-card>
                      <el-collapse  @change="openStationData(item)" style="border-left: solid rgb(230,235,245) 1px;border-right: solid rgb(230,235,245) 1px;border-bottom: solid rgb(230,235,245) 1px;">
                        <el-collapse-item  name="1" style="padding-left: 20px;">
                          <template slot="title"  >
                            <p style="margin-left: 45% ;"><span  style="font-size: 15px;color: #00a0e9;">数据展开</span><i  v-show="getStationDataIsOpen(item.id,true)" class="el-icon-caret-bottom" style="color: #00a0e9;font-size: 15px;" /><i v-show="getStationDataIsOpen(item.id,false)" class="el-icon-caret-right" style="color: #00a0e9;font-size: 15px;" /></p>
                          </template>

                          <el-table
                            :key="stationDataKey"
                            :data="stationDataMap[item.id]"
                            :height="300"
                            style="width: 100%;border-top:solid rgb(230,235,245) 1px;">
                            <el-table-column
                              label="参数编号"
                              prop="paramCode">
                            </el-table-column>
                            <el-table-column
                              label="参数名称"
                              prop="paramName">
                            </el-table-column>
                            <el-table-column
                              label="参数值"
                              prop="paramValue">
                            </el-table-column>
                            <el-table-column
                              label="结果"
                              prop="paramResult">
                              <template slot-scope="scope">
                                <el-tag size="small" :type="getResultStatus(scope.row.paramResult)">{{scope.row.paramResult ? dict.label.result[scope.row.paramResult] : ''}}</el-tag>
                              </template>
                            </el-table-column>
                            <el-table-column
                              label="判断范围"
                              prop="paramRange">
                            </el-table-column>
                            <el-table-column
                              label="单位"
                              prop="paramUnit">
                            </el-table-column>
                          </el-table>
                          <!--分页-->
<!--                          <pagination />-->
                        </el-collapse-item>
                      </el-collapse>
                    </div>


                  </el-timeline-item>

                </el-timeline>
              </div>
            </el-tab-pane>
            <el-tab-pane label="过程数据" name="param">
              <el-input v-model="tableSearch.search" clearable placeholder="请输入关键字" style="width: 285px;" class="filter-item"  />
              <el-table
                :data="qualityParamTableData.filter(data => !tableSearch.search
                || data.paramName.toLowerCase().includes(tableSearch.search.toLowerCase())
                || data.paramCode.toLowerCase().includes(tableSearch.search.toLowerCase()))"
                style="width: 100%">
                <el-table-column
                  label="参数编号"
                  prop="paramCode">
                </el-table-column>
                <el-table-column
                  label="参数名称"
                  prop="paramName">
                </el-table-column>
                <el-table-column
                  label="参数值"
                  prop="paramValue">
                </el-table-column>
                <el-table-column
                  label="结果"
                  :filters="[{ text: 'OK', value: '1' }, { text: 'NG', value: '0' }]"
                  :filter-method="filterTag"
                  prop="paramResult">
                  <template slot-scope="scope">
                    <el-tag size="small" :type="getResultStatus(scope.row.paramResult)">{{scope.row.paramResult ? dict.label.result[scope.row.paramResult] : ''}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  label="判断范围"
                  prop="paramRange">
                </el-table-column>
                <el-table-column
                  label="单位"
                  prop="paramUnit">
                </el-table-column>
                <el-table-column
                  label="工位编号"
                  prop="stationCode"
                  :filters="filterSts"
                  :filter-method="filterTag"
                >
                </el-table-column>
                <el-table-column
                  label="工序编号"
                  prop="operationCode"
                  :filters="filterOps"
                  :filter-method="filterTag"
                >
                </el-table-column>
                <el-table-column
                  label="设备编号"
                  prop="deviceCode"
                  :filters="filterEqs"
                  :filter-method="filterTag"
                >
                </el-table-column>
                <el-table-column
                  label="操作人"
                  prop="createBy">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="物料数据" name="material">
              <div class="text-center step-card">
                <el-row>
                  <el-col :span="12">
                    <el-radio-group v-model="retrospect" @change="retrospectChange">
                      <el-radio label="1">正向追溯</el-radio>
                      <el-radio label="2">返向追溯</el-radio>
                    </el-radio-group>
                  </el-col>
                  <el-col :span="12">
                    <el-switch v-model="expandAll" :width="50" active-text="全部展开" inactive-text="全部折叠"  @change="expandChange"/>
                  </el-col>
                  <el-col :span="24">
                    <vue2-org-tree
                      name="test"
                      :data="materialTree"
                      :horizontal="horizontal"
                      :label-class-name="labelClassName"
                      :render-content="renderContent"
                      :collapsable="collapsable"
                      @on-expand="onExpand"
                      @on-node-click="onNodeClick"
                    />
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
            <el-tab-pane label="批次物料解绑数据" name="batch">
              <el-button :disabled="materialBatchHistorySelection.length === 0"
               @click="batchRecoveryOfBatchMaterials(materialBatchHistorySelection)">批量恢复批次物料</el-button>
              <el-table :data="materialBatchHistory" style="width: 100%" @selection-change="changeMaterialBatchHistory" max-height="400">
                <el-table-column type="selection" width="55" fixed/>
                <el-table-column label="产品SN" prop="productSn"/>
                <el-table-column label="产品型号" prop="productCode"/>
                <el-table-column label="产品类型" prop="productType"/>
                <el-table-column label="订单编号" prop="orderCode"/>
                <el-table-column label="工单编号" prop="workOrderCode"/>
                <el-table-column label="产线编号" prop="lienCode"/>
                <el-table-column label="工段编号" prop="sectionCode"/>
                <el-table-column label="工位编号" prop="stationCode"/>
                <el-table-column label="工序编号" prop="operationCode"/>
                <el-table-column label="设备编号" prop="deviceCode"/>
                <el-table-column label="物料编号" prop="materialSn"/>
                <el-table-column label="物料名称" prop="materialName"/>
                <el-table-column label="物料编码" prop="materialCode"/>
                <el-table-column label="使用数量" prop="quantity"/>
                <el-table-column label="物料单位" prop="materialUnit"/>
                <el-table-column label="过站ID" prop="passStationId"/>
                <el-table-column label="操作人" prop="createBy"/>
                <el-table-column label="操作" width="140px" align="center" fixed="right">
                  <template slot-scope="scope">
                    <span :data="scope.row">
                      <el-button slot="view" type="success" size="mini" @click="singleRecoveryBatch(scope.row)">恢复批次物料</el-button>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="单体码物料解绑数据" name="single">
              <el-button :disabled="materialSingleHistorySelection.length === 0"
              @click="batchRecoveryOfSingleCodeMaterials(materialSingleHistorySelection)">批量恢复单体码物料</el-button>
              <el-table :data="materialSingleHistory" style="width: 100%" @selection-change="changeMaterialSingleHistory" max-height="400">
                <el-table-column type="selection" width="55" fixed/>
                <el-table-column label="产品SN" prop="productSn"/>
                <el-table-column label="产品型号" prop="productCode"/>
                <el-table-column label="产品类型" prop="productType"/>
                <el-table-column label="订单编号" prop="orderCode"/>
                <el-table-column label="工单编号" prop="workOrderCode"/>
                <el-table-column label="产线编号" prop="lienCode"/>
                <el-table-column label="工段编号" prop="sectionCode"/>
                <el-table-column label="工位编号" prop="stationCode"/>
                <el-table-column label="工序编号" prop="operationCode"/>
                <el-table-column label="设备编号" prop="deviceCode"/>
                <el-table-column label="物料编号" prop="materialSn"/>
                <el-table-column label="物料名称" prop="materialName"/>
                <el-table-column label="物料编码" prop="materialCode"/>
                <el-table-column label="使用数量" prop="quantity"/>
                <el-table-column label="扫描顺序" prop="scanNumber"/>
                <el-table-column label="物料单位" prop="materialUnit"/>
                <el-table-column label="过站ID" prop="passStationId"/>
                <el-table-column label="操作人" prop="createBy"/>
                <el-table-column label="操作" width="140px" align="center" fixed="right">
                  <template slot-scope="scope">
                    <span :data="scope.row">
                      <el-button slot="view" type="success" size="mini" @click="singleRecoverySingleCodeMaterial(scope.row)">恢复单体码物料</el-button>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>

            <!--<el-tab-pane label="返修记录" name="history">返修记录</el-tab-pane>-->
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

    <!--修改路线状态-->
    <el-dialog title="设置路线" :visible.sync="dialogFormVisible">
        <el-form :model="productRoute">
          <el-divider>工序状态设置</el-divider>
          <div style="width: 100%;text-align: center;padding: 20px 20px;">
            <el-radio-group v-model="productRoute.result" @change="setOperationType($event,'result')">
              <el-radio label="0">强制NG</el-radio>
              <el-radio label="1">强制OK</el-radio>
              <el-radio label="2">初始化</el-radio>
            </el-radio-group>
          </div>
          <el-divider>返修设置</el-divider>
          <div style="width: 100%;text-align: center;padding: 20px 20px;">
            <el-radio-group v-model="productRoute.repairSign" @change="setOperationType($event,'repairSign')">
              <el-radio label="0">不允许返修</el-radio>
              <el-radio label="1">允许返修</el-radio>
            </el-radio-group>
          </div>
        </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateProductResult">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import crudDataCourseParam from '@/api/data/dataCourseParam'
  import dataCellMain from '@/api/data/dataMain'
  import dataProductPath from '@/api/data/dataProductPath'
  import dataProductPathLog from '@/api/data/dataProductPathLog'
  import craftOperation from '@/api/craft/craftOperation'
  import dataPassStation from '@/api/data/dataPassStation'
  import dataCourseParam from '@/api/data/dataCourseParam'
  import dataMaterialBatchHistory from '@/api/data/dataMaterialBatchHistory'
  import dataMaterialSingleHistory from '@/api/data/dataMaterialSingleHistory'
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'

  const defaultForm = { id: null, productSn: null, productCode: null, productType: null, orderCode: null, workOrderCode: null, result: null, lienCode: null, sectionCode: null, startTime: null, endTime: null, pathCode: null, pathVersion: null, paramsCode: null, paramsVersion: null, bomCode: null, bomVersion: null, untitled1: null, untitled2: null, untitled3: null, createBy: null, createTime: null, updateBy: null, updateTime: null }
  export default {
  name: 'CellMainDetail',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
    dicts: ['product_type', 'result_status','repair_sign','result'],
    cruds() {
      return CRUD({ title: '过程数据', url: 'api/dataCourseParam', idField: 'id', sort: 'id,desc', crudMethod: { ...crudDataCourseParam },optShow:{add: false,
          edit: false,
          del: false,
          download: true,
          reset: true,
          import: false}})
    },
  data() {
    return {
      materialBatchHistorySelection: [],
      materialBatchHistorys: [],
      materialSingleHistorySelection: [],
      materialSingleHistorys: [],
      mainInf:defaultForm,
      productRoutes: [],
      productRoute:{},
      opMap: {},
      progress: 0,
      passStations: [],
      activeName: 'station',
      dialogFormVisible: false,
      qualityParamTableData: [],
      tableSearch: {
        search: '',
        formationSearch: ''
      },
      filterOps:[],
      filterSts:[],
      filterEqs:[],
      horizontal: true,
      collapsable: true,
      expandAll: false,
      labelClassName: "bg-white",
      retrospect: '1',
      materialTree: {},
      operationtype : "",
      operationDrawer: false,
      operationList:[],
      stationDataMap:{},
      stationDataIsOpen:{},
      stationDataKey:0,
      materialBatchHistory: [],
      materialSingleHistory: []
    }
  },
  methods: {
    //展开工位数据
    openStationData(data){
      console.log(data)
      if (this.stationDataIsOpen[data.id]){
        this.stationDataIsOpen[data.id]=false;
        this. stationDataKey++;
      }else {
        dataCourseParam.query({passStationId:data.id,size:60,sort: 'paramName'}).then(res =>{
          this.stationDataMap[data.id] = res.content;
          this. stationDataKey++;
          //this.stationDataMap.push(data.id,res.content);
        });
        this.stationDataIsOpen[data.id]=true;
      }
    },

    getStationDataIsOpen(id,isOpen){

      if (this.stationDataIsOpen[id]==undefined){
        this.stationDataIsOpen[id]=false;
      }
      if (this.stationDataIsOpen[id]==isOpen) {
        return true;
      }else{
        return false;
      }
    },

    //切换Tab
    handleClick(tab) {
      if(this.mainInf && this.mainInf.id){
        if(tab.name == 'station'){
          //获取过站信息
          this.getPassStations(this.mainInf);
        }else if(tab.name == 'param'){
          //过程参数
          this.getQualityParams(this.mainInf);
        }else if(tab.name == 'material'){
          //物料追溯
          this.getMaterials(this.mainInf);
        }else if(tab.name == 'formation'){
          //化成数据
          this.getFormations(this.mainInf);
        }else if(tab.name == 'ccd'){
          //ccd文件
          this.getCcdFiles(this.mainInf);
        }else if(tab.name == 'batch'){
          // 批次物料解绑
          this.getMaterialBatchHistory(this.mainInf);
        }else if(tab.name == 'single'){
          this.getMaterialSingleHistory(this.mainInf);
        }
      }
    },
    //点击工序弹窗
    stepClick(n){
      console.log(n)
      this.productRoute = {
        id:n.id,
        result: n.result,
        repairSign: n.repairSign,
        productSn: n.productSn,
        operationCode: n.operationCode
      };
      this.dialogFormVisible = true
    },
    //获取工艺路线
    getProductRoute(data){
      const query = {
        productSn: data.productSn,
        productCode: data.productCode
      }
      dataProductPath.query(query).then(res =>{
        this.productRoutes = res.content;
        this.calculateProgress();
      })
    },
    //获取当前工序状态颜色
    getStatus(result){
      if(result == '1'){
        return 'success';
      }else if(result == '0'){
        return 'error';
      }else{
        return 'wait';
      }
    },
    //获取当前工序状态颜色
    getResultStatus(result){
      if(result == '1' || result == '2'){
        return 'success';
      }else if(result == '0'){
        return 'danger';
      }else{
        return 'info';
      }
    },
    //更新工序状态和返修状态
    updateProductResult(){
      dataProductPath.edit(this.productRoute).then(()=>{
        this.$notify({
          title: '成功',
          message: '修改成功！',
          type: 'success'
        });
        //操作日志
        this.addProductRouteLog(
          {
            productSn:this.productRoute.productSn,
            operationContent: this.operationtype,
            operationCode: this.productRoute.operationCode
          }
        );

        this.productRoutes.forEach(item =>{
          if(item.id == this.productRoute.id){
            item.result = this.productRoute.result
            item.repairSign = this.productRoute.repairSign
            return;
          }
        })
        this.dialogFormVisible = false;
        this.calculateProgress();

      })
    },
    //计算进度条
    calculateProgress(){
      this.progress = 0;
      if(this.productRoutes.length > 0){
        let okNub = 0;
        this.productRoutes.forEach(item =>{
          if(item.result == '1'){
            okNub ++;
          }
        });
        if(okNub != 0){
          this.progress = Math.ceil(okNub / this.productRoutes.length * 100);
        }
      }
    },
    //获取过站数据
    getPassStations(data){
      dataPassStation.query({productSn:data.productSn}).then(res =>{
        this.passStations = res.content;
      })
    },
    //计算时间差
    timeDifference(day1, day2) {
      let minute = 0;
      if(day1 && day2){
    //   在苹果上，时间格式最好是 是 2020/02/02 它是斜杠开头的
        let day11 = day1.replace(/-/g, "/");
        let day22 = day2.replace(/-/g, "/");
        const day_day1 = new Date(day11);
        const day_day2 = new Date(day22);
        let disparity = day_day2.getTime() - day_day1.getTime();
        // 转为分钟数的时候，可能会出现精度丢失;你需要注意下
        minute = Math.round(disparity / 1000);
      }
      return minute;
    },
    //获取过程质量数据
    getQualityParams(data){
      dataCourseParam.query({productSn:data.productSn}).then(res =>{
        if(res){
          let map = {};
          this.filterOps = [];
          this.filterSts = [];
          this.filterEqs = [];
          console.log(res)
          res.content.forEach(d =>{
            if(!map[d.operationCode]){
              map[d.operationCode] = d.operationCode;
              this.filterOps.push({ text: d.operationCode, value: d.operationCode });
            }
            if(!map[d.stationCode]){
              map[d.stationCode] = d.stationCode;
              this.filterSts.push({ text: d.stationCode, value: d.stationCode });
            }
            if(!map[d.deviceCode]){
              map[d.deviceCode] = d.deviceCode;
              this.filterEqs.push({ text: d.deviceCode, value: d.deviceCode });
            }
          });
        }
        this.qualityParamTableData = res.content;
      })
    },
    //过滤
    filterTag(value, row) {
      return row.paramresult === value || row.stationcode === value || row.opcode === value || row.equipmentcode === value;
    },
    /**
     * 物料追溯
     * @param h
     * @param data
     * @returns {boolean}
     */
    renderContent (h, data) {
      let codeName = data.codetype == '1' ? '单件码：' : '批次码：';
      let code = '物料编码：';

      const element = (
        <div class="material_node">
          <div class="material_title">{data.materialName}</div>
          <div class="material_content">
            <div class="material_code">
              {code} {data.materialCode}
            </div>
            <div class="material_code">
              {codeName} {data.materialSn}
            </div>
          </div>
        </div>
      );


      return element;
    },
    onExpand(h, data){
      const _this = this
      if ('expand' in data) {
        data.expand = !data.expand
        if (!data.expand && data.children) {
          _this.collapse(data.children)
        }
      } else {
        _this.$set(data, 'expand', true)
      }
      return true;
    },
    // 自定义您的点击事件
    onNodeClick(e, data) {
    },
    collapse(list) {
      var _this = this
      list.forEach(function(child) {
        if (child.expand) {
          child.expand = false
        }
        child.children && _this.collapse(child.children)
      })
    },
    expandChange() {
      this.collapsable = true
      this.toggleExpand(this.materialTree, this.expandAll)
    },
    toggleExpand(data, val) {
      var _this = this
      if (Array.isArray(data)) {
        data.forEach(function(item) {
          _this.$set(item, 'expand', val)
          if (item.children) {
            _this.toggleExpand(item.children, val)
          }
        })
      } else {
        this.$set(data, 'expand', val)
        if (data.children) {
          _this.toggleExpand(data.children, val)
        }
      }
    },
    //获取物料数据
    getMaterials(data){
      console.log(data.productSn)
      dataCellMain.getMaterialTree({productSn:data.productSn , retrospect: this.retrospect}).then(res =>{
          this.materialTree = res;
      });
    },
    //监听正反向追溯
    retrospectChange(value){
      this.getMaterials(this.mainInf);
    },
    //添加日志
    addProductRouteLog(data){
      dataProductPathLog.add(data).then(()=>{});
    },
    setOperationType(value,type){
      const resultMap = {"1":"强制OK","2":"初始化","0":"强制NG"}
      const repairSignMap = {"0":"不允许返修","1":"允许返修"}
      if(type == 'result'){
        this.operationtype = resultMap[value];
      }else{
        this.operationtype = repairSignMap[value];
      }
    },
    //关闭
    handleClose(done) {
      done();
    },
    //打开日志
    openOperationLog(){
      this.operationDrawer = true;
      console.log(this.mainInf)
      dataProductPathLog.query({productSn:this.mainInf.productSn}).then(res =>{
        this.operationList = res.content;
      })
    },
    // 获取批次物料解绑数据
    getMaterialBatchHistory(data) {
      console.log("批次解绑数据参数：" + data.productSn)
      dataMaterialBatchHistory.query({productSn:data.productSn}).then(res => {
        this.materialBatchHistory = res.content
      })
    },
    // 多选批次物料解绑数据
    changeMaterialBatchHistory(data){
      this.materialBatchHistorySelection = []
      this.materialBatchHistorySelection = data
    },
    // 批量恢复批次物料解绑数据
    batchRecoveryOfBatchMaterials(data){
      data.forEach(element => {
        this.materialBatchHistorys.push(element)
      })
      dataMaterialBatchHistory.restoreBatchMaterial(this.materialBatchHistorys).then(() => {
        this.$notify({ title: '恢复成功', type: 'success'})
        this.getMaterialBatchHistory(this.mainInf)
        this.materialBatchHistorys = []
      }).catch(err => {
        console.log(err.response.data.message)
      })
    },
    // 单个恢复批次物料解绑数据
    singleRecoveryBatch(data) {
      this.materialBatchHistorys.push(data)
      this.$confirm("确定恢复该条码?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          dataMaterialBatchHistory.restoreBatchMaterial(this.materialBatchHistorys).then(() => {
            this.$notify({ title: '恢复成功', type: 'success'})
            this.getMaterialBatchHistory(this.mainInf)
            this.materialBatchHistorys = []
          })
        })
        .catch(() => {
        });
      /*dataMaterialBatchHistory.restoreBatchMaterial(this.materialBatchHistorys).then(() => {
        this.$notify({ title: '恢复成功', type: 'success'})
        this.getMaterialBatchHistory(this.mainInf)
        this.materialBatchHistorys = []
      }).catch(err => {
        console.log(err.response.data.message)
      })*/
    },
    // 获取单体码物料解绑数据
    getMaterialSingleHistory(data){
      console.log("批次单体码解绑数据参数：" + data.productSn)
      dataMaterialSingleHistory.query({productSn:data.productSn}).then(res => {
        this.materialSingleHistory = res.content
      })
    },
    // 多选单体码物料解绑数据
    changeMaterialSingleHistory(data){
      this.materialSingleHistorySelection = []
      this.materialSingleHistorySelection = data
    },
    // 批量恢复单体码物料解绑数据
    batchRecoveryOfSingleCodeMaterials(data){
      data.forEach(element => {
        this.materialSingleHistorys.push(element)
      })
      dataMaterialSingleHistory.restoreSingleCodeMaterial(this.materialSingleHistorys).then(() => {
        this.$notify({ title: '恢复成功', type: 'success'})
        this.getMaterialSingleHistory(this.mainInf)
        this.materialSingleHistorys = []
      }).catch(err => {
        console.log(err.response.data.message)
      })
    },
    // 单个恢复单体码物料解绑数据
    singleRecoverySingleCodeMaterial(data){
      this.materialSingleHistorys.push(data)
      this.$confirm("确定恢复该条码?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          dataMaterialSingleHistory.restoreSingleCodeMaterial(this.materialSingleHistorys).then(() => {
            this.$notify({ title: '恢复成功', type: 'success'})
            this.getMaterialSingleHistory(this.mainInf)
            this.materialSingleHistorys = []
          })
        })
        .catch(() => {
        });
      /* dataMaterialSingleHistory.restoreSingleCodeMaterial(this.materialSingleHistorys).then(() => {
         this.$notify({ title: '恢复成功', type: 'success'})
         this.getMaterialSingleHistory(this.mainInf)
         this.materialSingleHistorys = []
       }).catch(err => {
         console.log(err.response.data.message)
       })*/
    }
  },
  mounted() {
    const id = this.$route.params.id
    dataCellMain.getById(id).then(data => {
      if(data){
        this.mainInf = data

        //获取工艺路线
        this.getProductRoute(data);

        //获取过站信息
        this.getPassStations(data);

      }
    }).catch(() => {
      this.$router.go(-1)
    });

    craftOperation.query({size:999}).then(res =>{
      console.log(res)
      if(res){
        res.content.forEach(d =>{
          this.opMap[d.operationCode] = d.operationName;
        });
      }
    });
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" >
  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }
  .user-info {
    padding-left: 0;
    list-style: none;
    li{
      border-bottom: 1px solid #F0F3F4;
      padding: 11px 0;
      font-size: 13px;
    }
    .user-right {
      float: right;
      a{
        color: #317EF3;
      }
    }
  }
  .badge-content {
    background-color: #e6a23c;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #fff;
  }
  .step-description {
    width: 100px;
    text-align: center;
  }
  .el-step.is-center .el-step__description {
    padding-left: 0;
    padding-right: 0;
  }
  .my_steps {
    width: 100%;
    overflow-x: auto;
    display: -webkit-box;
    -webkit-overflow-scrolling: touch;
    margin: 0.5rem 0.5rem
  }
  .my_steps ::-webkit-scrollbar {
    display: none;
  }

  .material_node {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 3px;
    border: 2px dashed transparent;
    text-align: center;
    width: 280px;
  }

  .material_title {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #409eff;
    color: #fff;
    border-radius: 4px 4px 0 0;
  }

  .material_content {
     width: 100%;
     height: 45px;
     font-size: 11px;
     line-height: 20px;
     border: 1px solid #409eff;
     border-radius: 0 0 4px 4px;
     text-align: center;
     background-color: #fff;
     color: #333;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

  .material_code {
    padding-left: 10px;
    width: 100%;
    text-align: left
  }

</style>

<style type="text/css">
  .org-tree-node-label {
    white-space: nowrap;
  }
  .bg-white {
    background-color: white;
  }
  .bg-orange {
    background-color: orange;
  }
  .bg-gold {
    background-color: gold;
  }
  .bg-gray {
    background-color: gray;
  }
  .bg-lightpink {
    background-color: lightpink;
  }
  .bg-chocolate {
    background-color: chocolate;
  }
  .bg-tomato {
    background-color: tomato;
  }

</style>
